<template>
    <div class="arcgis-container">
        <div id="viewDiv"></div>
        <div id="title">
            <h1>测试用例</h1>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import * as intl from "@arcgis/core/intl.js";
// 地图绘画相关
import Graphic from "@arcgis/core/Graphic.js";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";

// 官方文档地址：https://developers.arcgis.com/javascript/latest/scenes-3d/#create-a-new-map

let map, view;

onMounted(() => {
    intl.setLocale('zh-CN')

    map = new Map({
        basemap: 'hybrid'
    })

    view = new MapView({
        container: 'viewDiv',
        map: map,
        center: [120.4, 36.1],
        zoom: 10
    })

    // title组件
    const title = document.getElementById('title')
    view.ui.add(title, 'top-right');

    // 绘画相关
    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);
    // 画点
    const point = { //Create a point
        type: "point",
        longitude: 120.4,
        latitude: 36.1
    };
    const simpleMarkerSymbol = {
        type: "simple-marker",
        color: [226, 119, 40],  // Orange
        outline: {
            color: [255, 255, 255], // White
            width: 1
        }
    };
    const pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol
    });
    graphicsLayer.add(pointGraphic);

    // 画线
    const polyline = {
        type: "polyline",
        paths: [
            [120.4, 36.1], //Longitude, latitude
            [121.4, 37.1], //Longitude, latitude
            [120.4, 37.1]  //Longitude, latitude
        ]
    };
    const simpleLineSymbol = {
        type: "simple-line",
        color: [226, 119, 40], // Orange
        width: 2
    };

    const polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: simpleLineSymbol
    });
    graphicsLayer.add(polylineGraphic);

    // 画面
    // Create a polygon geometry
    const polygon = {
        type: "polygon",
        rings: [
            [120.4, 36.1],
            [121.4, 36.1],
            [121.4, 37.1],
            [120.4, 37.1],
        ]
    };

    const simpleFillSymbol = {
        type: "simple-fill",
        color: [227, 139, 79],  // Orange, opacity 80%
        outline: {
            color: [226, 119, 40],
            width: 2
        }
    };

    const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: simpleFillSymbol,
        attributes: {
            Name: "测试标题",
            Description: "这是一个面"
        },
        popupTemplate: {
            title: "{Name}",
            content: "{Description}"
        }
    });
    graphicsLayer.add(polygonGraphic);
});

</script>

<style scoped lang="scss">
#viewDiv {
    width: 100%;
    height: calc(100vh - 160px);
}
</style>